<!DOCTYPE html>
<html>
<head>
	<meta charset='utf-8'>
	<title>webfront</title>
	<link rel="stylesheet" href="css/bootstrap.min.css">
	<link rel="stylesheet" type="text/css" href="css/style.css">
	<script type="text/javascript" src='js/jquery-2.1.3.min.js'></script>
	<script type='text/javascript' src='js/script.js'></script>
</head>
<body>
	<div id="navigate" class='clearfloat'>
		<div class='support'>
			<div id='straightline'></div>
		</div>
		<ul id='navigate-link'>
			<li>
				<a href="#top-head" class='current small-padding'>
					<div class='big-circle'></div>
					<span class='list-font'>顶部</span>
				</a>
			</li>
			<li class='small-list-circle'>
				<a href="#hot-item" class='small-padding'>
					<div class="small-circle"></div>
					<span class="list-font">热门专辑</span>
				</a>
			</li>
			<li class='small-list-circle'>
				<a href="#item1" class='small-padding'>
					<div class="small-circle"></div>
					<span class="list-font">热门分类1</span>
				</a>
			</li>
			<li class='small-list-circle'>
				<a href="#item2" class='small-padding'>
					<div class="small-circle"></div>
					<span class="list-font">热门分类2</span>
				</a>
			</li>
			<li class='small-list-circle'>
				<a href="#item3" class='small-padding'>
					<div class="small-circle"></div>
					<span class="list-font">热门分类3</span>
				</a>
			</li>
			<li class='small-list-circle'>
				<a href="#item4" class='small-padding'>
					<div class="small-circle"></div>
					<span class="list-font">热门分类4</span>
				</a>
			</li>
			<li style='padding-top: 38px;'>
				<a href="#footer-left" class='small-padding'>
					<div class='big-circle'></div>
					<span class='list-font'>底部</span>
				</a>
			</li>
		</ul>
	</div>
	<header class='clearfloat album-item' id='top-head'>
		<div id="hd-left" class='clearfloat'>
			<h1>webfront</h1>
			<ul class='menu'>
				<li><a href="#">首页</a></li>
				<li><a href="#">我的</a></li>
				<li><a href="#">热门</a></li>
				<li><a href="#">分类</a></li>
			</ul>
		</div>
		<div id="hd-right" class='clearfloat'>
			<form class="form-inline clearfloat" style="float: left;">
				<div class="form-group">
					<input type='text' class='form-control'>
					<button type='submit' class='btn btn-default submit-btn'></button>
				</div>
			</form>
			<div id='us-log'>
				<a href="#">登录</a>
				|
				<a href="#">注册</a>
			</div>
		</div>
	</header>
	<section id="wrap">
		<div id="ms-push" class='clearfloat'>
			<div id="pic-slide" class='clearfloat'>
				<div id="pic-slide-show">
					<ul>
						<li>
							<img src="image/pic1.gif" alt="">
							<div class="pic-slide-ms"></div>
						</li>
						<li>
							<img src="image/pic2.gif" alt="">
							<div class="pic-slide-ms"></div>
						</li>
						<li>
							<img src="image/pic3.gif" alt="">
							<div class="pic-slide-ms"></div>
						</li>
						<li>
							<img src="image/pic5.gif" alt="">
							<div class="pic-slide-ms"></div>
						</li>
						<li>
							<img src="image/pic4.gif" alt="">
							<div class="pic-slide-ms"></div>
						</li>
						<li>
							<img src="image/pic1.gif" alt="">
							<div class="pic-slide-ms"></div>
						</li>
					</ul>
				</div>
				<div id="list-dot">
						<ul>
							<li class='current-dot'><a href="">1</a></li>
							<li><a href="">2</a></li>
							<li><a href="">3</a></li>
							<li><a href="">4</a></li>
							<li><a href="">5</a></li>
						</ul>
				</div>
				<span id="switch-left" class="switch-button">
					<img src="./image/left.gif" alt="">
				</span>
				<span id="switch-right" class="switch-button">
					<img src="./image/right.gif" alt="">
				</span>
			</div>
			<div id="pic-list">
				<ul class='clearfloat'>
					<li>
						<a href="#"><img src="image/pic1.gif" class='pic-list-bottom pic-list-right'></a>
						<div class="small-pic-ms">
							<span class='float-left'>龙胜</span>
							<span class='float-right'>关注度：3w</span>
						</div>
					</li>
					<li>
						<a href="#"><img src="image/pic2.gif" class='pic-list-bottom'></a>
						<div class="small-pic-ms">
							<span class='float-left'>阳朔</span>
							<span class='float-right'>关注度：2w</span>
						</div>
					</li>
					<li>
						<a href="#"><img src="image/pic3.gif" class='pic-list-right'></a>
						<div class="small-pic-ms">
							<span class='float-left'>城区</span>
							<span class='float-right'>关注度：2.5w</span>
						</div>
					</li>
					<li>
						<a href="#"><img src="image/pic5.gif"></a>
						<div class="small-pic-ms">
							<span class='float-left'>日月双塔</span>
							<span class='float-right'>关注度：1.5w</span>
						</div>
					</li>
				</ul>
			</div>
		</div>
		<div id="hot-item" class='album clearfloat album-item'>
			<div class='album-title clearfloat'>
				<h2>热门专辑</h2>
				<a href="#">查看全部</a>
			</div>
			<div class='album-pic-list clearfloat'>
				<ul>
					<li>
						<a href="#"><img src="image/pic1.gif" alt=""></a>
						<div class='album-pic-ms'>
							<span class='album-pic-ms-bgtl'>专辑名</span>
							<br>
							<span class='album-pic-ms-smtl'>关注度</span>
						</div>
					</li>
					<li>
						<a href="#"><img src="image/pic2.gif" alt=""></a>
						<div class='album-pic-ms'>
							<span class='album-pic-ms-bgtl'>专辑名</span>
							<br>
							<span class='album-pic-ms-smtl'>关注度</span>
						</div>
					</li>
					<li>
						<a href="#"><img src="image/pic3.gif" alt=""></a>
						<div class='album-pic-ms'>
							<span class='album-pic-ms-bgtl'>专辑名</span>
							<br>
							<span class='album-pic-ms-smtl'>关注度</span>
						</div>
					</li>
					<li class='album-pic-special'>
						<a href="#"><img src="image/pic4.gif" alt=""></a>
						<div class='album-pic-ms'>
							<span class='album-pic-ms-bgtl'>专辑名</span>
							<br>
							<span class='album-pic-ms-smtl'>关注度</span>
						</div>
					</li>
					<li>
						<a href="#"><img src="image/pic5.gif" alt=""></a>
						<div class='album-pic-ms'>
							<span class='album-pic-ms-bgtl'>专辑名</span>
							<br>
							<span class='album-pic-ms-smtl'>关注度</span>
						</div>
					</li>
					<li>
						<a href="#"><img src="image/pic3.gif" alt=""></a>
						<div class='album-pic-ms'>
							<span class='album-pic-ms-bgtl'>专辑名</span>
							<br>
							<span class='album-pic-ms-smtl'>关注度</span>
						</div>
					</li>
					<li>
						<a href="#"><img src="image/pic4.gif" alt=""></a>
						<div class='album-pic-ms'>
							<span class='album-pic-ms-bgtl'>专辑名</span>
							<br>
							<span class='album-pic-ms-smtl'>关注度</span>
						</div>
					</li>
					<li class='album-pic-special'>
						<a href="#"><img src="image/pic2.gif" alt=""></a>
						<div class='album-pic-ms'>
							<span class='album-pic-ms-bgtl'>专辑名</span>
							<br>
							<span class='album-pic-ms-smtl'>关注度</span>
						</div>
					</li>
				</ul>
			</div>
		</div>
		<div id="item1" class='album clearfloat album-item'>
			<div class='album-title clearfloat'>
				<h2>热门分类1</h2>
				<a href="#">查看全部</a>
			</div>
			<div class='album-pic-list clearfloat'>
				<ul>
					<li>
						<a href="#"><img src="image/food1.jpg" alt=""></a>
						<div class='album-pic-ms'>
							<span class='album-pic-ms-bgtl'>专辑名</span>
							<br>
							<span class='album-pic-ms-smtl'>关注度</span>
						</div>
					</li>
					<li>
						<a href="#"><img src="image/food5.jpg" alt=""></a>
						<div class='album-pic-ms'>
							<span class='album-pic-ms-bgtl'>专辑名</span>
							<br>
							<span class='album-pic-ms-smtl'>关注度</span>
						</div>
					</li>
					<li>
						<a href="#"><img src="image/food3.jpg" alt=""></a>
						<div class='album-pic-ms'>
							<span class='album-pic-ms-bgtl'>专辑名</span>
							<br>
							<span class='album-pic-ms-smtl'>关注度</span>
						</div>
					</li>
					<li class='album-pic-special'>
						<a href="#"><img src="image/food6.jpg" alt=""></a>
						<div class='album-pic-ms'>
							<span class='album-pic-ms-bgtl'>专辑名</span>
							<br>
							<span class='album-pic-ms-smtl'>关注度</span>
						</div>
					</li>
					<li>
						<a href="#"><img src="image/food2.jpg" alt=""></a>
						<div class='album-pic-ms'>
							<span class='album-pic-ms-bgtl'>专辑名</span>
							<br>
							<span class='album-pic-ms-smtl'>关注度</span>
						</div>
					</li>
					<li>
						<a href="#"><img src="image/food8.jpg" alt=""></a>
						<div class='album-pic-ms'>
							<span class='album-pic-ms-bgtl'>专辑名</span>
							<br>
							<span class='album-pic-ms-smtl'>关注度</span>
						</div>
					</li>
					<li>
						<a href="#"><img src="image/food4.jpg" alt=""></a>
						<div class='album-pic-ms'>
							<span class='album-pic-ms-bgtl'>专辑名</span>
							<br>
							<span class='album-pic-ms-smtl'>关注度</span>
						</div>
					</li>
					<li class='album-pic-special'>
						<a href="#"><img src="image/food7.jpg" alt=""></a>
						<div class='album-pic-ms'>
							<span class='album-pic-ms-bgtl'>专辑名</span>
							<br>
							<span class='album-pic-ms-smtl'>关注度</span>
						</div>
					</li>
				</ul>
			</div>
		</div>
		<div id="item2" class='album clearfloat album-item'>
			<div class='album-title clearfloat'>
				<h2>热门分类2</h2>
				<a href="#">查看全部</a>
			</div>
			<div class='album-pic-list clearfloat'>
				<ul>
					<li>
						<a href="#"><img src="image/sport1.jpg" alt=""></a>
						<div class='album-pic-ms'>
							<span class='album-pic-ms-bgtl'>专辑名</span>
							<br>
							<span class='album-pic-ms-smtl'>关注度</span>
						</div>
					</li>
					<li>
						<a href="#"><img src="image/sport2.jpg" alt=""></a>
						<div class='album-pic-ms'>
							<span class='album-pic-ms-bgtl'>专辑名</span>
							<br>
							<span class='album-pic-ms-smtl'>关注度</span>
						</div>
					</li>
					<li>
						<a href="#"><img src="image/sport3.jpg" alt=""></a>
						<div class='album-pic-ms'>
							<span class='album-pic-ms-bgtl'>专辑名</span>
							<br>
							<span class='album-pic-ms-smtl'>关注度</span>
						</div>
					</li>
					<li class='album-pic-special'>
						<a href="#"><img src="image/sport4.jpg" alt=""></a>
						<div class='album-pic-ms'>
							<span class='album-pic-ms-bgtl'>专辑名</span>
							<br>
							<span class='album-pic-ms-smtl'>关注度</span>
						</div>
					</li>
					<li>
						<a href="#"><img src="image/sport5.jpg" alt=""></a>
						<div class='album-pic-ms'>
							<span class='album-pic-ms-bgtl'>专辑名</span>
							<br>
							<span class='album-pic-ms-smtl'>关注度</span>
						</div>
					</li>
					<li>
						<a href="#"><img src="image/sport6.jpg" alt=""></a>
						<div class='album-pic-ms'>
							<span class='album-pic-ms-bgtl'>专辑名</span>
							<br>
							<span class='album-pic-ms-smtl'>关注度</span>
						</div>
					</li>
					<li>
						<a href="#"><img src="image/sport7.jpg" alt=""></a>
						<div class='album-pic-ms'>
							<span class='album-pic-ms-bgtl'>专辑名</span>
							<br>
							<span class='album-pic-ms-smtl'>关注度</span>
						</div>
					</li>
					<li class='album-pic-special'>
						<a href="#"><img src="image/sport8.jpg" alt=""></a>
						<div class='album-pic-ms'>
							<span class='album-pic-ms-bgtl'>专辑名</span>
							<br>
							<span class='album-pic-ms-smtl'>关注度</span>
						</div>
					</li>
				</ul>
			</div>
		</div>
		<div id="item3" class='album clearfloat album-item'>
			<div class='album-title clearfloat'>
				<h2>热门分类3</h2>
				<a href="#">查看全部</a>
			</div>
			<div class='album-pic-list clearfloat'>
				<ul>
					<li>
						<a href="#"><img src="image/pic1.gif" alt=""></a>
						<div class='album-pic-ms'>
							<span class='album-pic-ms-bgtl'>专辑名</span>
							<br>
							<span class='album-pic-ms-smtl'>关注度</span>
						</div>
					</li>
					<li>
						<a href="#"><img src="image/pic2.gif" alt=""></a>
						<div class='album-pic-ms'>
							<span class='album-pic-ms-bgtl'>专辑名</span>
							<br>
							<span class='album-pic-ms-smtl'>关注度</span>
						</div>
					</li>
					<li>
						<a href="#"><img src="image/pic3.gif" alt=""></a>
						<div class='album-pic-ms'>
							<span class='album-pic-ms-bgtl'>专辑名</span>
							<br>
							<span class='album-pic-ms-smtl'>关注度</span>
						</div>
					</li>
					<li class='album-pic-special'>
						<a href="#"><img src="image/pic4.gif" alt=""></a>
						<div class='album-pic-ms'>
							<span class='album-pic-ms-bgtl'>专辑名</span>
							<br>
							<span class='album-pic-ms-smtl'>关注度</span>
						</div>
					</li>
					<li>
						<a href="#"><img src="image/pic5.gif" alt=""></a>
						<div class='album-pic-ms'>
							<span class='album-pic-ms-bgtl'>专辑名</span>
							<br>
							<span class='album-pic-ms-smtl'>关注度</span>
						</div>
					</li>
					<li>
						<a href="#"><img src="image/pic3.gif" alt=""></a>
						<div class='album-pic-ms'>
							<span class='album-pic-ms-bgtl'>专辑名</span>
							<br>
							<span class='album-pic-ms-smtl'>关注度</span>
						</div>
					</li>
					<li>
						<a href="#"><img src="image/pic4.gif" alt=""></a>
						<div class='album-pic-ms'>
							<span class='album-pic-ms-bgtl'>专辑名</span>
							<br>
							<span class='album-pic-ms-smtl'>关注度</span>
						</div>
					</li>
					<li class='album-pic-special'>
						<a href="#"><img src="image/pic2.gif" alt=""></a>
						<div class='album-pic-ms'>
							<span class='album-pic-ms-bgtl'>专辑名</span>
							<br>
							<span class='album-pic-ms-smtl'>关注度</span>
						</div>
					</li>
				</ul>
			</div>
		</div>
		<div id="item4" class='album clearfloat album-item'>
			<div class='album-title clearfloat'>
				<h2>热门分类4</h2>
				<a href="#">查看全部</a>
			</div>
			<div class='album-pic-list clearfloat'>
				<ul>
					<li>
						<a href="#"><img src="image/scene1.jpg" alt=""></a>
						<div class='album-pic-ms'>
							<span class='album-pic-ms-bgtl'>专辑名</span>
							<br>
							<span class='album-pic-ms-smtl'>关注度</span>
						</div>
					</li>
					<li>
						<a href="#"><img src="image/scene2.jpg" alt=""></a>
						<div class='album-pic-ms'>
							<span class='album-pic-ms-bgtl'>专辑名</span>
							<br>
							<span class='album-pic-ms-smtl'>关注度</span>
						</div>
					</li>
					<li>
						<a href="#"><img src="image/scene3.jpg" alt=""></a>
						<div class='album-pic-ms'>
							<span class='album-pic-ms-bgtl'>专辑名</span>
							<br>
							<span class='album-pic-ms-smtl'>关注度</span>
						</div>
					</li>
					<li class='album-pic-special'>
						<a href="#"><img src="image/scene4.jpg" alt=""></a>
						<div class='album-pic-ms'>
							<span class='album-pic-ms-bgtl'>专辑名</span>
							<br>
							<span class='album-pic-ms-smtl'>关注度</span>
						</div>
					</li>
					<li>
						<a href="#"><img src="image/scene8.jpg" alt=""></a>
						<div class='album-pic-ms'>
							<span class='album-pic-ms-bgtl'>专辑名</span>
							<br>
							<span class='album-pic-ms-smtl'>关注度</span>
						</div>
					</li>
					<li>
						<a href="#"><img src="image/scene5.jpg" alt=""></a>
						<div class='album-pic-ms'>
							<span class='album-pic-ms-bgtl'>专辑名</span>
							<br>
							<span class='album-pic-ms-smtl'>关注度</span>
						</div>
					</li>
					<li>
						<a href="#"><img src="image/scene6.jpg" alt=""></a>
						<div class='album-pic-ms'>
							<span class='album-pic-ms-bgtl'>专辑名</span>
							<br>
							<span class='album-pic-ms-smtl'>关注度</span>
						</div>
					</li>
					<li class='album-pic-special'>
						<a href="#"><img src="image/scene7.jpg" alt=""></a>
						<div class='album-pic-ms'>
							<span class='album-pic-ms-bgtl'>专辑名</span>
							<br>
							<span class='album-pic-ms-smtl'>关注度</span>
						</div>
					</li>
				</ul>
			</div>
		</div>
	</section>
	<footer>
		<div id='footer-left' class='album-item'>
			<h2>webfront</h2>
		</div>
		<div id="footer-right">
			<div class='clearfloat footer-right-list'>
				<ul class='clearfloat'>
					<li><a href="">意见反馈 |</a></li>
					<li><a href="">&nbsp;常见问题 |</a></li>
					<li><a href="">&nbsp;商业合作 |</a></li>
					<li><a href="">&nbsp;关于我们 |</a></li>
					<li><a href="">&nbsp;加入我们</a></li>
				</ul>
			</div>
			<div class='copywright'>
				<span>版权所有&nbsp;@&nbsp;2014&nbsp;PIPITEE团队</span>
			</div>
			<div class='web-record'>
				<span>京ICP备11011334号 京公网安备110105007294</span>
			</div>
		</div>
	</footer>
</body>
</html>